<template>
  <div class="login-vue" style="background-size: cover;" :style="{backgroundImage:bgImg}">
    <div style="bottom:1.3rem;text-align: center;width: 100%;color: #9b9b9b;font-size: 0.93rem;position: absolute;">
      {{copyright}}
    </div>

    <div class="login-container">
      <div :style="{backgroundImage:configuration.loginLeftImg}" class="left-content">
        <div style="width: 100%;height:100%;padding: 2rem 2rem;" >
          <span style="color: #F5F5F5;font-size:1.6rem;font-weight: bold;">welcome!</span><br>
          <span style="color: #F5F5F5;font-size:1.2rem;"> {{ title }}</span>
        </div>
      </div>
      <div style="width:50%;float: left;padding: 0 3rem;" :class="rightContent">
        <div class="tabs" :class="(tabChange == 'login'|| tabChange == 'wxBind')?'':'cTabs' ">
          <Tabs :datas="tabs" v-model="activeTab" v-if="tabChange == 'login'" @change="changeTab"></Tabs>
          <Tabs :datas="wxTab" v-model="activeTab" v-if="tabChange == 'wechat'"></Tabs>
          <Tabs :datas="addTab" v-model="activeTab" v-if="tabChange == 'register'"></Tabs>
          <Tabs :datas="resetTab" v-model="activeTab" v-if="tabChange == 'forgetPassword'"></Tabs>
          <Tabs :datas="wxBindTab" v-model="activeTab" v-if="tabChange == 'wxBind'"></Tabs>
        </div>
        <div class="loginContent" v-if="tabChange == 'login'">
          <!-- 密码登录 -->
          <div class="login" v-if="activeTab == 'module1'">
            <div class="loginItem pw-input">
<!--              <div v-if="itemErr" class="errWord">{{t("账号或密码不正确")}}</div>-->
              <div class="h-input h-input-prefix-icon inputBox" :class="{'err':itemErr}"
                   style="position: relative;">
                <Input type="text" v-model="loginData.username" :placeholder="t('Username')" @blur="changeItemErr" class="loginItem-input"/>
                <img src="/img/pic/zh.png" class="loginItem-icon">
              </div>
            </div>
            <div class="loginItem pw-input">
              <div class="h-input h-input-prefix-icon inputBox" style="position: relative;">
                <Input type="password" v-model="loginData.password" :placeholder="t('Password')" class="loginItem-input"/>
                <img src="/img/pic/mm.png" class="loginItem-icon">
              </div>
            </div>
            <div class="code pw-input">
              <div v-if="codeErr" class="errWord">{{t('验证码错误')}}</div>
              <div class="codeBox">
                <div class="loginItem" style="width: 50%;">
                  <div class="h-input h-input-suffix-icon inputBox" :class="{'err':codeErr}" style="width: 100%;">
                    <Input v-model="loginData.verify" :placeholder="t('Captcha')" class="loginItem-input"
                           style="padding-left: 25px;box-sizing: border-box;" @blur="changeCodeErr" @keyup.enter="submit"/>
                    <img src="/img/pic/yzm.png" class="loginItem-icon">
                  </div>
                </div>
                <div class="codeImg" style="width: 50%;height:2.8rem;cursor: pointer;vertical-align: bottom;">
                  <img style="width: 100%;height:100%;cursor: pointer;vertical-align: bottom;"
                       :src="verifyUrl" @click="updateVerify"/>
                </div>
              </div>
            </div>
            <div class="loginItem pw-input" v-if="needChangePassword">
              <div class="h-input h-input-prefix-icon inputBox" style="position: relative;">
                <Input type="password" v-model="new_password" :placeholder="t('NewPassword')" class="loginItem-input"/>
                <img src="/img/pic/mm.png" class="loginItem-icon">
              </div>
            </div>
            <div class="loginItem pw-input" v-if="needChangePassword">
              <div class="h-input h-input-prefix-icon inputBox" style="position: relative;">
                <Input type="password" v-model="new_password_re" :placeholder="t('RepeatNewPassword')" class="loginItem-input"/>
                <img src="/img/pic/mm.png" class="loginItem-icon">
              </div>
            </div>
            <div style="font-size:0.75rem;margin-top: 0.5rem ">
              <Checkbox v-model="rememberMe">{{t('记住我')}}</Checkbox>
            </div>
            <div class="tipBtn" style="margin-top: 0">
              <div class="register">
                <span v-if="configuration.register">{{t('没有账号？')}}</span>
                <span @click="handleRegister" v-if="configuration.register">{{t('注册新账号')}}</span>
              </div>
              <div class="forget">
                <span @click="resetPwd" v-if="configuration.forgetPw">{{t('Forgot Password')}}</span>
              </div>
            </div>
            <div class="loginBtn">
              <Button color="blue" @click="submit">{{t('Login')}}</Button>
            </div>
          </div>
          <!-- 短信登录 -->
          <div class="login smsLogin" v-else>
            <div class="loginItem sms-input">
<!--              <div v-if="itemErr" class="errWord">{{t("账号或密码不正确")}}</div>-->
              <div class="h-input h-input-prefix-icon inputBox" :class="{'err':itemErr}" style="position: relative;">
                <Input type="text" v-model="loginData.username" :placeholder="t('Phone')" class="loginItem-input"/>
                <img src="/img/pic/zh.png" class="loginItem-icon">
              </div>
            </div>
<!--            <div class="loginItem" style="width: 19rem;height: 2.8rem;" ref="dragBox">&lt;!&ndash; style="width: 20.8rem;height: 3.13rem;"&ndash;&gt;-->
<!--              <drag-verify-->
<!--                  ref="dragVerifyRef"-->
<!--                  :width="widthNum"-->
<!--                  :height="heightNum"-->
<!--                  progressBarBg="#3b91ff"-->
<!--                  completedBg="#3b91ff"-->
<!--                  background="#F5F5F5"-->
<!--                  :text="t('请按住滑块拖动到最右边')"-->
<!--                  :successText="t('验证成功')"-->
<!--                  textSize="0.8rem"-->
<!--                  handlerIcon="h-icon-right"-->
<!--                  successIcon="h-icon-check"-->
<!--                  @passcallback="passcallback2">-->
<!--              </drag-verify>-->
<!--            </div>-->
            <div class="code sms-input">
              <div v-if="codeErr" class="errWord">{{t('验证码错误')}}</div>
              <div class="codeBox">
                <div class="loginItem" style="width: 50%;">
                  <div class="h-input h-input-suffix-icon inputBox" :class="{'err':codeErr}" style="width: 100%;">
                    <Input v-model="loginData.verify" :placeholder="t('Captcha')" class="loginItem-input"
                           style="padding-left: 25px;box-sizing: border-box;" @blur="changeCodeErr" @keyup.enter="submit"/>
                    <img src="/img/pic/yzm.png" class="loginItem-icon">
                  </div>
                </div>
                <div class="codeImg" style="width: 50%;height:2.8rem;cursor: pointer;vertical-align: bottom;">
                  <img style="width: 100%;height:100%;cursor: pointer;vertical-align: bottom;"
                       :src="verifyUrl" @click="updateVerify"/>
                </div>
              </div>
            </div>
            <div class="code sms-input">
              <div v-if="codeErr" class="errWord">{{t('验证码错误')}}</div>
              <div class="codeBox">
                <div class="loginItem" style="width: 278px;">
                  <div class="h-input h-input-suffix-icon inputBox" :class="{'err':codeErr}" style="width: 100%;">
                    <Input type="text" v-model="loginData.smscode" :placeholder="t('SMSCode')" @keyup.enter="submit"  class="loginItem-input"/>
                    <img src="/img/pic/yzm.png" class="loginItem-icon">
                  </div>
                </div>
                <div class="codeImg" style="width: 140px;">
                  <Button :color="btnColor" @click="sendCode" :disabled="btnColor == 'gray'">{{codeBtnWord.name}}</Button>
                </div>
              </div>
            </div>
            <div style="font-size:0.75rem;margin-top: 0.5rem ">
              <Checkbox v-model="rememberMe">{{t('记住我')}}</Checkbox>
            </div>
            <div class="tipBtn" style="margin-top: 0">
              <div class="register">
                <span v-if="configuration.register">{{t('没有账号？')}}</span>
                <span @click="handleRegister" v-if="configuration.register">{{t('注册新账号')}}</span>
              </div>
              <div class="forget">
                <span @click="resetPwd" v-if="configuration.forgetPw">{{t('Forgot Password')}}</span>
              </div>
            </div>
            <div class="loginBtn">
              <Button color="blue" @click="submit">{{t('Login')}}</Button>
            </div>
          </div>
  <!--        <div class="agreement">-->
  <!--          <Checkbox v-model="agreement"></Checkbox>-->
  <!--          <span>我已阅读并同意</span>-->
  <!--          <span>《用户服务协议》、《隐私政策》</span>-->
  <!--        </div>-->
          <div class="wxLogin" v-if="configuration.loginWx && (activeTab == 'module2' || (activeTab == 'module1' && !needChangePassword))">
            <div class="wxLoginTitle">- {{t('其他登录方式')}} -</div>
            <img src="/img/pic/wx.png" alt="" @click="wxLogin">
          </div>
        </div>
        <!-- 微信登录 -->
        <div class="wxContent" v-if="tabChange == 'wechat'">
          <div class="qrCode" id="qrCode">
          </div>
<!--          <div style="font-size:0.75rem;margin-top: 0.5rem ">-->
<!--            <Checkbox>{{t('记住我')}}</Checkbox>-->
<!--          </div>-->
          <div class="word1" style="padding-top: 0.7rem;">{{t('使用微信扫一扫登录')}}</div>
          <div class="word2">
            <span>{{t('已有账号？')}}</span>
            <span @click="handleLogin">{{t('直接登录')}}</span>
          </div>
        </div>
        <!-- 忘记密码、注册账号 -->
        <div class="loginContent" v-if="tabChange == 'register' || tabChange == 'forgetPassword'">
          <div class="login" style="margin-top: 0;">
            <div class="loginItem forget-input">
              <div class="h-input h-input-prefix-icon inputBox" style="position: relative;">
                <Input type="text" v-model="registerModel.phone" :placeholder="t('Phone')" class="loginItem-input"/>
                <img src="/img/pic/zh.png" class="loginItem-icon">
              </div>
            </div>
            <div class="code forget-input">
              <div v-if="codeErr" class="errWord">{{t('验证码错误')}}</div>
              <div class="codeBox ">
                <div class="loginItem" style="width: 50%;">
                  <div class="h-input h-input-suffix-icon inputBox" :class="{'err':codeErr}" style="width: 100%;">
                    <Input v-model="registerModel.verify" :placeholder="t('Captcha')" class="loginItem-input"
                           style="padding-left: 25px;box-sizing: border-box;" @blur="changeCodeErr" @keyup.enter="submit"/>
                    <img src="/img/pic/yzm.png" class="loginItem-icon">
                  </div>
                </div>
                <div class="codeImg" style="width: 50%;height:2.8rem;cursor: pointer;vertical-align: bottom;">
                  <img style="width: 100%;height:100%;cursor: pointer;vertical-align: bottom;"
                       :src="verifyUrl" @click="updateVerify"/>
                </div>
              </div>
            </div>
            <div class="code forget-input">
              <div v-if="codeErr" class="errWord">{{t('验证码错误')}}</div>
              <div class="codeBox">
                <div class="loginItem" style="width:278px;">
                  <div class="h-input h-input-suffix-icon inputBox" :class="{'err':codeErr}" style="width: 100%;">
                    <Input v-model="registerModel.code" :placeholder="t('SMSCode')" style="padding-left: 25px;box-sizing: border-box;" @blur="changeCodeErr" @keyup.enter="submit" class="loginItem-input"/>
                    <img src="/img/pic/yzm.png" class="loginItem-icon">
                  </div>
                </div>
                <div class="codeImg" style="width: 140px;">
                  <Button :color="btnColor" @click="sendCode" :disabled="btnColor == 'gray'">{{codeBtnWord.name}}</Button>
                </div>
              </div>
            </div>
            <div class="loginItem forget-input">
              <div class="h-input h-input-prefix-icon inputBox" style="position: relative;"><!-- placeholder="密码(8-16位字母与数字)" -->
                <Input type="password" v-model="registerModel.password" :placeholder="t('NewPassword')" class="loginItem-input"/>
                <img src="/img/pic/mm.png" class="loginItem-icon">
              </div>
            </div>
            <div class="loginItem forget-input">
              <div class="h-input h-input-prefix-icon inputBox" style="position: relative;">
                <Input type="password" v-model="registerModel.confirmPassword" :placeholder="t('RepeatNewPassword')" class="loginItem-input"/>
                <img src="/img/pic/mm.png" class="loginItem-icon" style="">
              </div>
            </div>
          </div>
          <div class="addBtn">
            <Button v-if="tabChange == 'register'" color="blue" @click="handleManage">{{ t('Register') }}</Button>
            <Button v-if="tabChange == 'forgetPassword'" color="blue" @click="handleManage">{{ t('ChangePassword') }}</Button>
          </div>
  <!--        <div class="agreement">-->
  <!--          <Checkbox v-model="agreement"></Checkbox>-->
  <!--          <span>我已阅读并同意</span>-->
  <!--          <span>《用户服务协议》、《隐私政策》</span>-->
  <!--        </div>-->
          <div class="wordBox">
            <div class="word1" v-if="tabChange == 'forgetPassword' && configuration.signPwAutoRegister">{{t('未注册手机验证后自动注册')}}</div>
            <div class="word2">
              <span>{{t('已有账号？')}}</span>
              <span @click="handleLogin">{{t('直接登录')}}</span>
            </div>
          </div>
        </div>
        <!-- 微信绑定/注册 -->
        <div class="loginContent" v-if="tabChange == 'wxBind'">
          <div class="login">
            <div class="loginItem wxbind-input">
              <div class="h-input h-input-prefix-icon inputBox" style="position: relative;">
                <Input type="text" v-model="registerModel.phone" :placeholder="t('Phone')" class="loginItem-input"/>
                <img src="/img/pic/zh.png" class="loginItem-icon">
              </div>
            </div>
            <div class="code wxbind-input">
              <div v-if="codeErr" class="errWord">{{t('验证码错误')}}</div>
              <div class="codeBox ">
                <div class="loginItem" style="width: 50%;">
                  <div class="h-input h-input-suffix-icon inputBox" :class="{'err':codeErr}" style="width: 100%;">
                    <Input v-model="registerModel.verify" :placeholder="t('Captcha')" class="loginItem-input"
                           style="padding-left: 25px;box-sizing: border-box;" @blur="changeCodeErr" @keyup.enter="submit"/>
                    <img src="/img/pic/yzm.png" class="loginItem-icon">
                  </div>
                </div>
                <div class="codeImg" style="width: 50%;height:2.8rem;cursor: pointer;vertical-align: bottom;">
                  <img style="width: 100%;height:100%;cursor: pointer;vertical-align: bottom;"
                       :src="verifyUrl" @click="updateVerify"/>
                </div>
              </div>
            </div>
            <div class="code wxbind-input">
              <div v-if="codeErr" class="errWord">{{t('验证码错误')}}</div>
              <div class="codeBox">
                <div class="loginItem" style="width:278px;">
                  <div class="h-input h-input-suffix-icon inputBox" :class="{'err':codeErr}" style="width: 100%;">
                    <Input v-model="registerModel.code" :placeholder="t('SMSCode')" style="padding-left: 25px;box-sizing: border-box;" @blur="changeCodeErr" @keyup.enter="submit" class="loginItem-input"/>
                    <img src="/img/pic/yzm.png" class="loginItem-icon">
                  </div>
                </div>
                <div class="codeImg" style="width: 140px;">
                  <Button :color="btnColor" @click="sendCode" :disabled="btnColor == 'gray'">{{codeBtnWord.name}}</Button>
                </div>
              </div>
            </div>

          </div>
          <div class="addBtn" style="margin-top: 0.8rem">
            <Button v-if="tabChange == 'wxBind'" color="blue" @click="bindWxOrRegister">{{ t('确定') }}</Button>
          </div>
          <div class="wordBox" style="margin-top: 0.8rem">
            <div class="word1" v-if="tabChange == 'forgetPassword' && configuration.signPwAutoRegister">{{t('未注册手机验证后自动注册')}}</div>
            <div class="word2">
              <span>{{t('已有账号？')}}</span>
              <span @click="handleLogin">{{t('直接登录')}}</span>
            </div>
          </div>
        </div>
        <!-- 中英文切换 -->
        <div style="bottom: 0.5rem;position: absolute;left: 34.5rem;">
          <LinkButtons>
            <Button @click="changeLang('zh')" style="font-size: 0.8rem;">中文</Button>
            <Button @click="changeLang('en')" style="font-size: 0.8rem;">English</Button>
          </LinkButtons>
        </div>
      </div>
    </div>
  </div>
  <Modal v-model="wxBindDlg" middle hasDivider :closeOnMask="!wxBindDlg">
    <template #header>{{t('Notice')}}</template>
    <div style="width:354px">
      {{wxBindMessage}}
    </div>
    <template #footer class="text-right">
      <Button @click="wxBindDlgCancel()" color="primary">{{t('Confirm')}}</Button>
    </template>
  </Modal>
</template>
<script setup>
import {ajax,saveToken} from 'framework'
import {message} from 'HeyUI'
import {ref, watch,nextTick} from 'vue'
import {useStore, loadUserInfo} from 'store'
import {encrypt,md5} from 'crypto'
import dragVerify from './dragVerify.vue'
import 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
import {setLanguage,useI18n} from "i18n";
const WxLogin= window.WxLogin;
let store = useStore()
const tabChange = ref("login")


const activeTab = ref("module1")

const configuration = ref({
  loginWx:window._configs["LoginConfig.LOGIN_WX"] !== 'false',//微信登录
  forgetPw:window._configs["LoginConfig.FORGET_PW"] !== 'false',//忘记密码
  register:window._configs["LoginConfig.REGISTER"] !== 'false',//注册
  signPw:window._configs["LoginConfig.SIGN_PW"] !== 'false',//密码登录
  signPwAutoRegister:window._configs["LoginConfig.FORGET_PW_AUTOREGISTER"] !== 'false',
  signSms:window._configs["LoginConfig.SIGN_SMS"] !== 'false',//短信登录
  loginLeftImg:(window._configs["PlatformConfig.LoginLeftImg"] == null || window._configs["PlatformConfig.LoginLeftImg"] === "")?
      "url('img/login/login-left.png')":"url('"+window._configs["PlatformConfig.LoginLeftImg"]+"')",
})
const {t}=useI18n({
  zh:{
    Username:"用户名",
    Password:"密码",
    Captcha:"验证码",
    NewPassword:"新密码",
    RepeatNewPassword:"重复新密码",
    ChangePassword:"修改密码",
    Register:'立即注册',
    Login:"登录",
    Phone:"手机号",
    SMSCode:'短信验证码',
    GetSMSCode:"获取验证码",
    'Forgot Password':'忘记密码',
    "Notice":"通知",
  },
  en:{
    "记住我":"Remember me",
    手机号不能为空: "the phone cannot be empty",
    用户名不能为空: "the username cannot be empty",
    密码不能为空:"password cannot be empty",
    验证码不能为空:"captcha cannot be empty",
    短信验证码不能为空:"SMS verification code cannot be empty",
    验证码错误:'captcha error',
    新密码不能为空:"new password cannot be empty",
    账号或密码不正确:"username or password incorrect",
    验证成功:"authenticate successfully",
    请按住滑块拖动到最右边:'swiping to the right side',
    密码登录:"Password Login",
    短信登录:'SMS Login',
    微信登录:'WeChat Login',
    找回密码:'Retrieve Password',
    账号注册:'Account Registration',
    确定:'comfirm',
    '微信绑定/注册':'WeChat binding/registration',
    '没有账号？':'No account?',//Don't have an account?
    '注册新账号':' Register a new account',
    '已有账号？':'Already have an account? ',
    '直接登录':'Log in here',
    '其他登录方式':'Other login methods',
    '使用微信扫一扫登录':'Scan and log in using WeChat',
    '未注册手机验证后自动注册':'If not registered, register directly',
    '登录出错,请重试!':'Login error, please try again!',
    '账号未注册,请先注册账号!':'Account not registered, please register your account first!',
    '发送成功':'Sent successfully',
    '请输入手机号':'Please enter your phone number',
    '新密码至少需要8位，且包含大小写字母、数字和符号':'The new password requires at least 8 characters and includes uppercase and lowercase letters, numbers, and symbols',
    '新密码与重复的新密码不一致':'The new password does not match the duplicate new password',
    '注册成功,请登录':'Registration successful, please log in',
    '修改成功,请登录':'Modified successfully, please log in',
    '重新获取':'retrieve again',
    "获取验证码":'GetSMSCode',
    "未绑定账号，请绑定或注册":"Account not bound, please bind or register",
    "绑定成功，请登录":"Binding successful, please log in",
    "微信未绑定账号，请绑定或注册":"WeChat account not bound, please bind or register",
  }
})
const tabs = ref({
  module1: t('密码登录'),
  module2: t('短信登录'),
})
const wxTab = ref({
  module1: t('微信登录'),
})
const addTab = ref({
  module1: t('账号注册'),
})
const resetTab = ref({
  module1: t('找回密码'),
})
const wxBindTab = ref({
  module1: t('微信绑定/注册'),
})
const dragVerifyRef = ref(null)
const dragVerifyRefStatus = ref(false)//短信登录 滑动条状态
function getConfiguration() {
  if (!configuration.value.signPw) {
    delete tabs.value.module1
    activeTab.value="module2"
    dragVerifyRefStatus.value = false
    reset()
    setTimeout(()=>{
      console.log(dragBox.value.offsetHeight,'dragVerifyRef')
      widthNum.value = dragBox.value.clientWidth
      heightNum.value = dragBox.value.clientHeight
    },0)
  }
  if (!configuration.value.signSms) {
    delete tabs.value.module2
  }
}
function changeLang(lang){
  setLanguage(lang)
  tabs.value.module1 = t('密码登录')
  tabs.value.module2 = t('短信登录')
  wxTab.value.module1 = t('微信登录')
  addTab.value.module1 = t('账号注册')
  resetTab.value.module1 = t('找回密码')
  codeBtnWord.value.name = t("获取验证码")
  wxBindTab.value.module1 = t('微信绑定/注册')
}
getConfiguration()
const itemErr = ref(false)
const codeErr = ref(false)

const loginData = ref({
  username: '',
  password: '',
  verify: '',
  smscode: '',
})

function changeItemErr() {
  if (itemErr.value) {
    itemErr.value = !itemErr.value
  }
}

function changeCodeErr() {
  if (codeErr.value) {
    codeErr.value = !codeErr.value
  }
}

const agreement = ref(false)
//忘记密码
function resetPwd() {
  rememberMe.value = false
  registerModel.value = {}
  tabChange.value = "forgetPassword"
  activeTab.value = "module1"
}
//注册
function handleRegister() {
  rememberMe.value = false
  registerModel.value = {}
  tabChange.value = "register"
  activeTab.value = "module1"
}
//密码登录
function handleLogin() {
  tabChange.value = "login"
  activeTab.value = "module1"
  loginData.value = {}
  //resetForm()
}
//微信登录
function handleWxBind(){
  rememberMe.value = false
  registerModel.value = {}
  tabChange.value = "wxBind"
  activeTab.value = "module1"
}
addEventListener('loginError',e=>{
  wxLogin()
  message(t("登录出错,请重试!"));
})
const openId = ref('')
const unionId = ref('')
addEventListener('loginReg',e=>{
  openId.value = e.openId
  unionId.value = e.unionId
  handleWxBind()
  message(t("微信未绑定账号，请绑定或注册"));
})
function wxLogin() {
  rememberMe.value = false
  tabChange.value = "wechat"
  activeTab.value = "module1"
  nextTick(()=>{
    new WxLogin({
      id:"qrCode",
      appid: window._configs["WxOpenConfig.APP_ID"],//"wxd7d3c9368afef5f0",
      scope: "snsapi_login",
      redirect_uri: window.location.origin+"/WXLogin/userInfo",//"http://zqpz7d.natappfree.cc/WXLogin/userInfo",
      state: "1223",
      self_redirect:true,
      style: "black",
      href: "",
      stylelite:1,
    });
  })
}
const qrCode = ref()
const registerForm = ref(null)
const registerModel = ref({
  code: '',
  phone: '',
  password: '',
  confirmPassword: '',
  verify:'',
})
const validationRules = {
  required: ['code', 'phone', 'password', 'confirmPassword'],
}

function reset() {
  if (dragVerifyRef.value != undefined) {
    dragVerifyRef.value.reset();
    dragVerifyRefStatus.value = false
  }
  codeErr.value = false
}
const codeBtnWord = ref({name:t("获取验证码")})
const timer = ref(null)
const btnColor = ref("blue")
function sendCode2(url,phone,verify){
  if (!phone) {
    message(t("请输入手机号"));
    return;
  }
  if (!verify){
    message(t("验证码不能为空"));
    return;
  }
  if (isNaN(verify)) {
    message(t("验证码错误"));
    return;
  }
  if (timer.value) return
  ajax.get(url).then((res) => {
    message(t("发送成功"));
    btnColor.value = "gray"
    let num = 60
    timer.value = setInterval(() => {
      codeBtnWord.value.name = t('重新获取')+`(${num--})`
      if (num <= 0) {
        clearInterval(timer.value)
        timer.value = null
        num = 60
        btnColor.value = "blue"
        codeBtnWord.value.name = t("获取验证码")
        return
      }
    }, 1000)
  }).catch((e) => {
    //更新验证码
    updateVerify()
  })
}
function sendCode() {
  //注册
  if (tabChange.value == 'register') {
    let url = '/systemLogin/sms/sendSmsForRegister?phoneNumber='+registerModel.value.phone+"&verify="+registerModel.value.verify
    sendCode2(url,registerModel.value.phone,registerModel.value.verify)
    //忘记密码
  } else if (tabChange.value == 'forgetPassword') {
    let url = '/systemLogin/sms/sendSmsForForget?phoneNumber='+registerModel.value.phone+"&verify="+registerModel.value.verify
    sendCode2(url,registerModel.value.phone,registerModel.value.verify)
    //微信绑定账号或注册
  } else if (tabChange.value == 'wxBind') {
    let url = '/systemLogin/sms/sendSmsForWxBind?phoneNumber='+registerModel.value.phone+"&verify="+registerModel.value.verify
    sendCode2(url,registerModel.value.phone,registerModel.value.verify)
    //短信登录
  } else {
    let url = '/systemLogin/sms/sendSmsForLogin?phoneNumber='+loginData.value.username+"&verify="+loginData.value.verify
    sendCode2(url,loginData.value.username,loginData.value.verify)
    // if (!dragVerifyRefStatus.value) {
    //   message(t("请按住滑块拖动到最右边"));
    //   return;
    // }
  }
}

function resetForm() {
  registerModel.value = registerForm.value.resetValue();
  registerForm.value.resetValid();
}
const wxBindMessage = ref('')
const wxBindDlg = ref(false)
function wxBindDlgCancel(){
  wxBindDlg.value = false
  location.reload()
}
function bindWxOrRegister(){
  if (!registerModel.value.phone) {
    message(t("手机号不能为空"));
    return;
  }
  if (!registerModel.value.code) {
    message(t("验证码不能为空"));
    return;
  }
  ajax.post("/systemLogin/wxBind", {...registerModel.value,openId:openId.value, unionId: unionId.value}).then((res) => {
    //handleLogin()
    setSession(res)
    if (res.data.message.includes("password") || res.data.message.includes("密码") ){
      wxBindMessage.value = res.data
      wxBindDlg.value = true
    } else {
      message(res.data)
      location.reload()
    }
    openId.value = ''
  })
}
function handleManage() {
  // if (!agreement.value) {
  //   message("请先阅读并同意用户和隐私协议");
  //   return;
  // }
  if (!registerModel.value.phone) {
    message(t("手机号不能为空"));
    return;
  }
  if (!registerModel.value.code) {
    message(t("验证码不能为空"));
    return;
  }
  if (!registerModel.value.password) {
    message(t("新密码不能为空"));
    return;
  }
  if (registerModel.value.password.length < 8 || !reg.test(registerModel.value.password)) {
    message(t("新密码至少需要8位，且包含大小写字母、数字和符号"));
    return;
  }
  if (registerModel.value.password != registerModel.value.confirmPassword) {
    message(t("新密码与重复的新密码不一致"));
    return;
  }
  if (tabChange.value == 'register') {
      ajax.post("/systemLogin/register", {...registerModel.value,openId:openId.value, unionId: unionId.value}).then((res) => {
        handleLogin()
        //resetForm()
        message(t("注册成功,请登录"));
        openId.value = ''
      })
  }
  if (tabChange.value == 'forgetPassword') {
      ajax.post("/systemLogin/changePassword", registerModel.value).then((res) => {
        handleLogin()
        //resetForm()
        message(t("修改成功,请登录"));
      })
  }
}

const wxCode = ref("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7d3c9368afef5f0&redirect_uri=http://hkezhx.natappfree.cc&response_type=code&scope=snsapi_login#wechat_redirect ")

const widthNum = ref(0)
const heightNum = ref(0)
const dragBox = ref(null)
function changeTab(e) {
  loginData.value = {}
  rememberMe.value = false //恢复初始值
  if (e.key === 'module2') {
    rightContent.value='right-content'
    dragVerifyRefStatus.value = false
    reset()
    setTimeout(()=>{
      console.log(dragBox.value.offsetHeight,'dragVerifyRef')
      widthNum.value = dragBox.value.clientWidth
      heightNum.value = dragBox.value.clientHeight
    },0)
  } else {
    if (needChangePassword.value){
      rightContent.value='right-content-changepwd'
    } else {
      rightContent.value='right-content'
    }
  }
}

function passcallback2(e) {
  dragVerifyRefStatus.value = e
}

let title = document.title//'EasyAdmin'
let verifyUrl = ref('captcha?t=' + new Date().getTime())
let verify = ref('');
const loading = ref(false),
    username = ref(),
    password = ref(),
    new_password = ref(),
    new_password_re = ref();
const needChangePassword = ref(false)
let copyright = ref(window._configs["PlatformConfig.CopyRight"])
let bgImg = _configs["PlatformConfig.LoginBgImg"] ? "url(" + _configs["PlatformConfig.LoginBgImg"] + ")" : null

function updateVerify() {
  verifyUrl.value = 'captcha?t=' + new Date().getTime();
  verify.value = ''
  loginData.value.verify=''
}
const rightContent = ref('right-content')
const reg = /(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!@#$%^&*.=\-\+()]).+/
//const reg =  /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z\d]{8,16}$/

function submit() {

  if (loginData.value.username){
    loginData.value.username = loginData.value.username.trim()
  }
  if (!loginData.value.username) {
    activeTab.value == "module1"? message(t("用户名不能为空")) : message(t("手机号不能为空"));
    return;
  }
  if (!loginData.value.verify) {
    message(t("验证码不能为空"));
    return;
  }
  // if (!agreement.value) {
  //   message("请先阅读并同意用户和隐私协议");
  //   return;
  // }
  if(activeTab.value == "module2"){
    // if(!dragVerifyRefStatus.value){
    //   message(t("请按住滑块拖动到最右边"));
    //   return;
    // }
    if (!loginData.value.smscode) {
      message(t("短信验证码不能为空"));
      return;
    }
  }else{
    if (!loginData.value.password) {
      message(t("密码不能为空"));
      return;
    }

    if (isNaN(loginData.value.verify)) {
      message(t("验证码错误"));
      return;
    }
  }
  let pwd = encrypt(loginData.value.password, loginData.value.verify)
  let params = activeTab.value == "module1" ? {
    username: loginData.value.username,
    password: pwd,
    verify: loginData.value.verify
  } : {
    phone: loginData.value.username,
    code: loginData.value.smscode,
  }
  //let pwd = loginData.value.password
  // const params = {username: loginData.value.username, password: pwd, verify: loginData.value.verify}
  if(needChangePassword.value){
    if (!new_password.value) {
      message(t("新密码不能为空"));
      return;
    }
    if(new_password.value.length<8){
      message(t("新密码至少需要8位，且包含大小写字母、数字和符号"));
      return;
    }
    if(!reg.test(new_password.value)){
      message(t("新密码至少需要8位，且包含大小写字母、数字和符号"));
      return;
    }
    if (new_password.value!=new_password_re.value) {
      message(t("新密码与重复的新密码不一致"));
      return;
    }
    params.new_password=new_password.value
  }
  loading.value = true;
  let url = activeTab.value == "module1" ? "/system/login" : "/systemLogin/loginByPhone"
  if(activeTab.value == "module1"){
    ajax.formPost(url, params).then((r) => {
      setSession(r)
      loadUserInfo().then(res => {
        loading.vaue = false;
      }).catch(e => {
        updateVerify()
        loading.value = false;
      })
    }).catch((e) => {
      console.log(e)
      if (e.code == 5000) {
        needChangePassword.value = true
        rightContent.value = "right-content-changepwd"
      } else if (e.code == 100) {
        message(e.message)
      }
      //更新验证码
      updateVerify()
      loading.value = false;
    })
  }else{
    ajax.post(url, params).then((r) => {
      // sessionStorage.uk = md5(username.value + "$" + password.value)
      setSession(r)
      loadUserInfo().then(res => {
        loading.vaue = false;
      }).catch(e => {
        updateVerify()
        loading.value = false;
      })
    }).catch((e) => {
      console.log(e)
      if (e.code == 5000) {
        needChangePassword.value = true
      }
      if (e.code == 100) {
        message(e.message)
      }
      //更新验证码
      updateVerify()
      loading.value = false;
    })
  }
}
function setSession(r){
  saveToken(r.data.un,r.data.uk,r.data.token,rememberMe.value)
  // sessionStorage.uk=r.data.uk
  // sessionStorage.un=r.data.un
  // sessionStorage._token=r.data.token
  // if (rememberMe.value){
  //   // localStorage.uk=r.data.uk
  //   // localStorage.un=r.data.un
  //   // localStorage._token=r.data.token
  //   //
  //   // localStorage.intime= new Date().getTime() + ( 1000 * 60 * 60 * 24 * 7 )
  //   // localStorage.loginDate = JSON.stringify(new Array(currentDate))
  //    let currentDate = new Date().getFullYear()+"-"+(new Date().getMonth()+1)+"-"+new Date().getDate()
  //
  //
  //   r.data.intime = new Date().getTime() + ( 1000 * 60 * 60 * 24 * 7 )
  //   r.data.currentDate = JSON.stringify(new Array(currentDate))
  //   localStorage.loginData = r.data//缺少加密
  // }
}
const rememberMe = ref(false)//记住我

</script>
<style lang="less" scoped>
.sms-input{
  margin-top:0.8rem;
}
.forget-input{
  margin-top:0.5rem;
}
.wxbind-input{
  margin-top:1rem;
}
.h-form .h-form-item{
  padding-bottom:1rem !important;
}
.h-tabs-item{
  font-size: 1.27rem;
  color: #9599A6;
}
input.h-input{
  font-size:0.8rem
}
.h-tabs-default>.h-tabs-item:hover::v-deep{
  color: #333333;
}
::v-deep .h-tabs-default>.h-tabs-item.h-tabs-item-selected{
  color: #333333;
}
::v-deep .h-tabs-default>.h-tabs-item:hover::after{
  height: 0;
}
::v-deep .h-tabs-default>.h-tabs-item.h-tabs-item-selected::after{
   height: 0;
}
::v-deep .h-tabs-default{
  font-size: 1.15rem;
  text-align: center;
  border-bottom:none;
  color: #9599A6;
}
::v-deep .qrCode>iframe{
  height: 160px;
  width: 270px;
}
@media screen and (max-width: 900px){
  /* 在这里添加您想要应用于笔记本设备的样式 */
  body {
    font-size: 12px;
  }
  .login-vue{
    font-size: 12px;
  }
}
@media screen and (min-width: 1025px) {
  body {
    font-size: 18px; /* 设置较大的字体大小 */
  }
}
.login-vue {
  /*text-align: center;*/
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #f7f8fa;
}

.login-vue .login-container {
  width: 50rem;
  min-height: 28rem;
  background-color: #FFFFFF;
  border-radius:1rem;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  transform: translate(-50%, -50%);
}
.left-content{
  width:50%;
  min-height:28.5rem;
  float: left;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 1rem;
}
.right-content .tabs {
  margin-top: 2rem;
}
.right-content .pw-input{
  margin-top:0.8rem;
}
.right-content-changepwd .login{
  margin-top: 1rem;
}

.right-content .tipBtn{
  margin-top: 1.2rem;
}
.right-content .wxLogin{
  display: flex;
}
.right-content-changepwd .tabs {
  margin-top: 1rem;
}
.right-content-changepwd .pw-input{
   margin-top:0.5rem;
 }
.right-content-changepwd .login{
  margin-top: 0rem;
}
.right-content-changepwd .tipBtn{
  margin-top: 0.5rem;
}
.right-content-changepwd .wxLogin{
  display: flex;
}
.cTabs {
  display: flex;
  justify-content: center;
  margin-top: 1rem !important;
}
.loginItem-icon{
  width: 18px;
  height: 20px;
  position: absolute;
  left: 22px;
  top:13px;
  z-index: 99;
}
.loginItem-input{
  padding-left: 54px !important;
  box-sizing: border-box;
}
.loginContent {
  .login {
    width: 100%;
    .loginItem {
      width: 100%;
      .errWord {
        color: #EB5851;
        font-size: 0.6rem;
        font-weight: Regular;
      }
      .inputBox {
        width: 100%;
        height: 2.8rem;
        display: flex;
        align-items: center;
        border-radius: 4px;
        .h-input {
          height: 100%;
        }
      }
      .err {
        border: 0.5px solid #EB5851;
      }
    }
    .code {
      position: relative;
      .errWord {
        color: #EB5851;
        font-size: 0.6rem;
        font-weight: Regular;
        position: absolute;
        left:0;
        top:-0.8rem;
        z-index: 2;
      }
      .codeBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .loginItem {
          .inputBox {
            /*width: 185px;*/
            width: 18.53rem;
            /*height: 47px;*/
            height: 2.8rem;
            display: flex;
            align-items: center;
            border-radius: 4px;

            .h-input {
              height: 100%;
            }
          }
        }

        .codeImg {
          border: 1px solid #DDE0E4;
          width: 9.33rem;
          border-radius: 4px;
          cursor: pointer;
          height: 2.8rem;

          button {
            width: 100%;
            height: 100%;
            font-size: 0.8rem;
          }
        }
      }
    }

    .tipBtn {
      display: flex;
      justify-content: space-between;

      font-size: 0.75rem;
      font-weight: Regular;
      color: #1668ED;
      cursor: pointer;
      user-select: none;

      .register {
        span {
          &:nth-child(1) {
            color: #333333;
          }

          &:nth-child(2) {
            /*margin-left: 12px;*/
            margin-left: 0.2rem;
          }
        }
      }
    }

    .loginBtn {
      width: 100%;
      height: 46px;
      height: 3.07rem;
      /*margin-top: 38px;*/
      margin-top: 0.8rem;
      button {
        width: 100%;
        height: 100%;
        /*font-size: 20px;*/
        font-size: 1rem;
        color: #FEFEFF;
      }
    }
  }

  .agreement {
    display: flex;
    align-items: center;
    /*margin-top: 23px;*/
    margin-top: 1.53rem;
    /*font-size: 14px;*/
    font-size: 0.75rem;
    font-weight: Regular;

    span:nth-child(2) {
      color: #94979C;
      /*margin-left: 7px;*/
      margin-left: 0.47rem;
    }

    span:nth-child(3) {
      color: #1467ED;
      cursor: pointer;
    }
  }

  .wxLogin {
    margin: 0 auto;
    margin-top: 0.8rem;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;

    .wxLoginTitle {
      text-align: center;
      color: #94979C;
      /*font-size: 18px;*/
      font-size: 0.75rem;
      font-weight: regular;
    }

    img {
      width: 1.8rem;
      height: 1.8rem;
      margin-top: 0.2rem;
      cursor: pointer;
    }
  }
}

.wxContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*margin-top: 41px;*/
  margin-top: 1rem;
  .qrCode {
    //width: 377.94px;
    height: 270px;
    border: 1px solid #DDE0E4;
    display: flex;
    align-items: center;
    justify-content: center;

  }
}

.wordBox {
  margin-top: 0.3rem;

}
.word1 {
  color: #94979C;
  /*font-size: 16px;*/
  font-size: 0.75rem;
  font-weight: Regular;
  text-align: center;
  /*margin-bottom: 12px;*/
  margin-bottom: 0.1rem;
}
.word2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*font-size: 16px;*/
  font-size: 0.75rem;
  font-weight: Regular;
  /*padding-bottom: 28px;*/
  //padding-bottom: 1.5rem;
  box-sizing: border-box;

  span:nth-child(1) {
    color: #333333;
  }

  span:nth-child(2) {
    color: #1668ED;
    /*margin-left: 12px;*/
    margin-left: 0.8rem;
    cursor: pointer;
  }
}
.addBtn {
  width: 100%;
  height: 3.07rem;
  margin-top: 0.5rem;
  button {
    width: 100%;
    height: 100%;
    font-size: 0.9rem;
    color: #FEFEFF;
  }
}
.login-vue .login-container .copyright {
  letter-spacing: 1px;
  margin-top: 30px;
  color: #7e7e7e;
}

.login-vue .login-container .copyright a {
  color: #7e7e7e;
}
</style>
